<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        p {
            margin-left: 30px;

        }

        p span {
            cursor: pointer;
        }

        ul {

            list-style: none;
            margin-left: 30px;
            margin-top: 10px;
        }

        ul li {
            display: none;
        }

        /* ul :first-child {
            display: block;
        } */

        .showli {
            display: block;
        }

        .showspan {
            color: red;
        }
    </style>
</head>

<body>
    <p>
        <span>好评</span>
        <span>有图</span>
        <span>差评</span>
    </p>

    <ul>
        <li class="showli">22222222</li>
        <li>img</li>
        <li>can not showing </li>
    </ul>

    <script>
        var spans = [...document.querySelectorAll("span")];
        var list = [...document.querySelectorAll("li")];

        spans.forEach(function (item, m) {
            item.addEventListener("click", function () {
                // 全清一遍 showli和showspan
                list.forEach(function (item2, n) {
                    // list[n].classList.remove("showli");
                    item2.classList.remove("showli");
                    spans[n].classList.remove("showspan")
                })
                // 清完后，给item即spans[m]加showspan ,list同理
                // spans[m].classList.add("showspan")
                item.classList.add("showspan")
                list[m].classList.add("showli")
            })
        })


        // 得用老师做法写
        // for (var m = 0; m < spans.length; m++) {
        //     spans[m].addEventListener("click", function () {
        //         for (var n = 0; n < list.length; n++) {
        //             this.classList.remove("showli");
        //             spans[n].classList.remove("showspan")
        //         }

        //         this.classList.add("showspan");
        //         list[m].classList.add("showli");

        //     })
        // }
    </script>
</body>

</html>